<template>
  <!-- 数据监控  -->
  <div class="data-container">
    <!-- <div style="font-size: 20px; font-weight: 500; margin-bottom: 20px;">
      汇聚概览
    </div> -->
    <div style="display: flex; justify-content: space-between">
      <!-- 头部tab栏切换 -->
      <div class="data-tabs">
        <div
          class="data-tabs-btn"
          :class="{ selected: isActive == index }"
          v-for="(item, index) in tabs"
          :key="index"
          @click="
            isActive = index;
            componentId = item.componentId;
          "
        >
          {{ item.title }}
        </div>
        <!-- 头部tab栏切换内容 -->
      </div>
      <!-- 时间tab栏切换 -->
      <data-title text="" class="data-title" @selectTablist="handleCheckWork" />
    </div>
    <!-- tab切换主题 -->
    <div>
      <keep-alive>
        <component :is="componentId"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import detail from "./component/detail";
import PieChart from "./component/PieChart";
import LineChart from "./component/LineChart";
import DataTitle from "./component/DataTitle";
import importTop from "./component/importTop5";
import InsertBtn from "./component/InsertBtn";
import ReportBtn from "./component/ReportBtn";

export default {
  name: "dataMonitoring",
  components: {
    detail,
    PieChart,
    DataTitle,
    importTop,
    LineChart,
    InsertBtn,
    ReportBtn,
  },
  data() {
    return {
      isActive: 0,
      componentId: "InsertBtn",
      tabs: [
        {
          title: "接入",
          componentId: "InsertBtn",
        },
        {
          title: "上报",
          componentId: "ReportBtn",
        },
      ],
      time: "",
      // 任务执行情况
      details: [
        {
          title: "运行中作业",
          value: 12,
          color: "#466AEF",
          tip: "运行总数",
          img: "sjjr_01.png",
        },
        {
          title: "任务管理",
          value: 16,
          color: "#37BD7F",
          tip: "异常次数",
          img: "sjjr_02.png",
        },
        {
          title: "作业管理",
          value: 35,
          color: "#FF302F",
          tip: "异常次数",
          img: "sjjr_03.png",
        },
      ],
      logs: [
        {
          title: "来源产品",
          value: 11,
          tip: "个",
        },
        {
          title: "日志数量",
          value: 122,
          tip: "条",
        },
        {
          title: "日志分类",
          value: 24,
          tip: "类",
        },
      ],
      // 饼状图
      cdata: {
        title: "任务管理执行状态",
        color: "#4B6EEF",
        data: [
          { value: 320, name: "启用" },
          { value: 23, name: "未启用" },
        ],
      },
      cdata2: {
        title: "作业管理执行状态",
        color: "#3ABF81",
        data: [
          { value: 320, name: "启用" },
          { value: 23, name: "未启用" },
        ],
      },
      // 折线图
      lineData: {
        color: "#3B8BFF",
        xAxis: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
        value: [150, 230, 224, 218, 135, 147, 260],
      },
      lineData2: {
        color: "#3ABF81",
        xAxis: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
        value: [150, 230, 224, 218, 135, 147, 260],
      },
      importData: 1,
      dataTop5: [
        { title: "获取数据失败", value: 62 },
        { title: "日期格式转换失败", value: 54 },
        { title: "字典映射失败", value: 32 },
        { title: "字段截取失败", value: 12 },
        { title: "描述信息填充失败", value: 5 },
      ],
      tableData: [
        {
          productType: "全部产品",
          value: 20,
          samePeriod: "20%",
          chain: "30%",
        },
        {
          productType: "安全登录",
          value: 19,
          samePeriod: "20%",
          chain: "30%",
        },
        {
          productType: "主机审计",
          value: 16,
          samePeriod: "20%",
          chain: "30%",
        },
        {
          productType: "防火墙",
          value: 22,
          samePeriod: "20%",
          chain: "30%",
        },
        {
          productType: "三合一",
          value: 100,
          samePeriod: "20%",
          chain: "30%",
        },
        {
          productType: "防病毒",
          value: 30,
          samePeriod: "20%",
          chain: "30%",
        },
      ],
    };
  },
  methods: {
    handleCheckWork(index) {
      this.isActive = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.data-container {
  background-color: rgb(238, 240, 245);
  .data-tabs {
    display: flex;
    align-items: center;
    // margin-bottom: 20px;
    .data-tabs-btn {
      width: 80px;
      height: 40px;
      text-align: center;
      margin-right: 30px;
      margin-bottom: 20px;
      font-size: 16px;
      color: #656565;
      cursor: pointer;
    }
  }
  .data-title{
    margin-top: -6px;
    
  }
  .selected {
    color: #4b6eef !important;
    border-bottom: 2px solid #4B6EEF;

  }
}
</style>
